<!--
 * @Descripttion: 
 * @version: 
 * @Author: Jsonco
 * @Date: 2022-12-18 19:48:04
 * @LastEditors: sueRimn
 * @LastEditTime: 2023-08-23 07:23:09
-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <title>WebGL缩放变换.html</title>
    <script src="../lib/gl-utils.js"></script>
    <script src="../lib/gl-debug.js"></script>
    <script src="../lib/ice-utils.js"></script>
    <script src="../lib/gl-matrix.js"></script>
    <script src="../lib/gl-lint.js" crossorigin></script>
    <script type="text/javascript">

        var gl = null;
        var angle = 45;
        var canvas = null;
        var texture;

        async function main() {
            startTime = new Date().getTime();
            initWebgl();
            initShader();
            // initEvent();

        }
        function render() {
       
                draw()
           window.requestAnimationFrame(render)
        
        }

        function initWebgl() {
            // 获取canvas对象
            canvas = document.getElementById('gl');
            //获取webgl绘制对象
            gl = getWebGLContext(canvas);
            gl.viewport(0, 0, canvas.clientWidth, canvas.clientHeight);
            if (!gl) {
                console.log('不支持webgl哦！');
                return;
            }
        };
        async function initShader() {
            // 初始化主色器程序
            let FSHADER_SOURCE = await loadShaderFromFile("./shader/shader.frag缩放.glsl")
            let VSHADER_SOURCE = await loadShaderFromFile("./shader/shader.vert缩放.glsl")
            texture = await initTexture(gl, "../img/山水1.png");
            if (VSHADER_SOURCE && FSHADER_SOURCE) {
                initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE);
                initBuffer();
                render()
            }
        }
        var positions = [];
        var indices = [];
        var colors = [];
        var angle1 = 0;
        var uv = [];
        var ModelMatrix;

        var uniformTexture;
        function initBuffer() {

            indices = [
                0, 2, 1,
                1, 2, 3
            ];
            positions = [
                -1.0, 1.0, 0.0,
                1.0, 1.0, 0.0,
                -1.0, -1.0, 0.0,
                1.0, -1.0, 0.0,

            ]
            uv = [0., 1.,
                1., 1.,
                0., 0.,
                1., 0.]

            let pointPosition = new Float32Array(positions);
            let aPsotion = gl.getAttribLocation(gl.program, "a_position");
            let triangleBuffer = gl.createBuffer();
            gl.bindBuffer(gl.ARRAY_BUFFER, triangleBuffer);
            gl.bufferData(gl.ARRAY_BUFFER, pointPosition, gl.STATIC_DRAW);
            gl.enableVertexAttribArray(aPsotion);
            gl.vertexAttribPointer(aPsotion, 3, gl.FLOAT, false, 4 * 3, 0);

            let attribOutUV = gl.getAttribLocation(gl.program, "a_texCoord");
            let uvpos = new Float32Array(uv);
            let UVBuffer = gl.createBuffer();
            gl.bindBuffer(gl.ARRAY_BUFFER, UVBuffer);
            gl.bufferData(gl.ARRAY_BUFFER, uvpos, gl.STATIC_DRAW);
            gl.enableVertexAttribArray(attribOutUV);
            gl.vertexAttribPointer(attribOutUV, 2, gl.FLOAT, false, 4 * 2, 0);

            let indexBuffer = gl.createBuffer();
            let indices1 = new Uint8Array(indices);
            gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer);
            gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, indices1, gl.STATIC_DRAW);

            uniformTexture = gl.getUniformLocation(gl.program, "qpicture");

            gl.activeTexture(gl.TEXTURE0);
            gl.bindTexture(gl.TEXTURE_2D, texture);
            gl.uniform1i(uniformTexture, 0);


            let u_Resolution = gl.getUniformLocation(gl.program, 'u_resolution');
            let resolution = glMatrix.vec2.create();
            resolution[0] = 512.0;
            resolution[1] = 512.0;
            gl.uniform2fv(u_Resolution, resolution);

            changeMatrix(angle1)

        }

        function changeMatrix(anglerot) {
            //矩阵变换
            let ProjMatrix = glMatrix.mat4.create();
            glMatrix.mat4.identity(ProjMatrix);
            //角度小，看到的物体大，角度大，看到的物体小。
            glMatrix.mat4.perspective(ProjMatrix, angle * Math.PI / 180, canvas.clientWidth / canvas.clientHeight, 1, 1000)    //修改可视域范围

            let uniformMatrix1 = gl.getUniformLocation(gl.program, "u_formMatrix");

            ModelMatrix = glMatrix.mat4.create();
            glMatrix.mat4.identity(ModelMatrix);
            //平移
            let translateMatrix = glMatrix.mat4.create();
            glMatrix.mat4.identity(translateMatrix);
            glMatrix.mat4.translate(translateMatrix, translateMatrix, [2, 0, 0]);
            //旋转
            let rotMatrix = glMatrix.mat4.create();
            glMatrix.mat4.identity(rotMatrix);
            glMatrix.mat4.rotate(rotMatrix, rotMatrix, anglerot, [0, 1, 0]);

          
            glMatrix.mat4.multiply(rotMatrix, rotMatrix, translateMatrix);


               //缩放
            let scaleMatrix = glMatrix.mat4.create();
            glMatrix.mat4.identity(scaleMatrix);
            glMatrix.mat4.scale(scaleMatrix, scaleMatrix, [1, 1, 1]);


            glMatrix.mat4.multiply(ModelMatrix, scaleMatrix, rotMatrix);


            let ViewMatrix = glMatrix.mat4.create();
            glMatrix.mat4.identity(ViewMatrix);
            glMatrix.mat4.lookAt(ViewMatrix, [3, 3, 7], [0, 0, 0], [0, 1, 0]);

            let mvMatrix = glMatrix.mat4.create();
            glMatrix.mat4.identity(mvMatrix);
            glMatrix.mat4.multiply(mvMatrix, ViewMatrix, ModelMatrix);

            let mvpMatrix = glMatrix.mat4.create();
            glMatrix.mat4.identity(mvpMatrix);
            glMatrix.mat4.multiply(mvpMatrix, ProjMatrix, mvMatrix);
            gl.uniformMatrix4fv(uniformMatrix1, false, mvpMatrix)


        }
        function draw() {
            gl.clearColor(0, 0, 0, 1);
            gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
            gl.enable(gl.DEPTH_TEST);
            gl.clearDepth(1.0);
            // angle1 += 0.01;
            let time = (new Date().getTime() - startTime) * 0.001;
            let u_Time = gl.getUniformLocation(gl.program, 'u_time');
            gl.uniform1f(u_Time, time);
            changeMatrix(angle1)
         
            gl.drawElements(gl.TRIANGLES, indices.length, gl.UNSIGNED_BYTE, 0);

            gl.flush();
        }

        function mouseMove(e) {
            let mx = e.offsetX / 512;
            let my = e.offsetY / 512;
            mousePosition = [mx, my];
            // console.log(mousePosition);

        }
        function initEvent() {
            canvas.addEventListener('mousemove', mouseMove, true);
        }
    </script>
</head>

<body onload="main()">
    <canvas id="gl" width="512" height="512">
    </canvas>
</body>

</html>